<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>才上眉头却下心头</title>
		<link rel="stylesheet" type="text/css" href="css/csmtqxxt.css">
		<link href="./css/coffee2.css" rel="stylesheet" type="text/css">
		<script src="lib/jquery-3.4.1.js"></script>
		<script>
			var now = -1; //保存着目前正在显示的那个li
			var t;
			var group;

			function playaroll() {
				if (now != -1)
					group[now].style.display = "none"; //让正在显示的li隐藏
				now++;
				if (now > 2)
					now = 0;
				group[now].style.display = "block";
				t = setTimeout("playaroll()", 1500);
			}

			function showAd(i) {
				clearTimeout(t);
				group[now].style.display = "none";
				now = i;
				group[now].style.display = "block";
				t = setTimeout("playaroll()", 1500);
			}
			$(function() {
				group = $("#pic li");
				playaroll();
				$(".tn-text-list").hide();
				$(".nav-left ul li").off("mouseover").on("mouseover", function() {
					var index = $(this).index();
					$(this).addClass("on").siblings().removeClass("on");
					$(".tn-text .tn-text-list").eq(index).show().siblings().hide();
				});
				$(".nav-left ul li").off("mouseout").on("mouseout", function() {
					$(this).removeClass("on");
					$(".tn-text-list").hide();
				});
				$("#pic-header").hover(
					function() {
						$("#linellae1").animate({
							left: "360px",
							width: "65px"
						}, 1000, function() {
							$(this).css("border", "#000 1px solid");
						});
					},
					function() {
						$("#linellae1").animate({
							left: "-100px",
							width: "300px"
						}, 1000, function() {
							$(this).css("border", "#666666 1px solid")
								.stop(false, true);
						});
					}
				);
				$("#pic-left").hover(
					function() {
						$("#linellae2").animate({
							left: "120px",
							width: "65px"
						}, 1000, function() {
							$(this).css("border", "#000 1px solid");
						});
					},
					function() {
						$("#linellae2").animate({
							left: "-330px",
							width: "300px"
						}, 1000, function() {
							$(this).css("border", "#666666 1px solid")
								.stop(false, true);
						});
					}
				);
				$("#pic-right").hover(
					function() {
						$("#linellae3").animate({
							right: "900px",
							width: "65px"
						}, 1000, function() {
							$(this).css("border", "#000 1px solid");
						});
					},
					function() {
						$("#linellae3").animate({
							right: "400px",
							width: "300px"
						}, 1000, function() {
							$(this).css("border", "#666666 1px solid")
								.stop(false, true);
						});
					}
				);

			})
		</script>
	</head>
	<body class="b1">
		<div class="main">
			<div class="main-nav"> <span>心情惬意，来杯咖啡吧 ☕</span> <a>SHOP</a><a href="却上心头.html"><img src="img/login.png"/></a>
			</div>
			<div class="nav-left">
				<ul>
					<li><a href="#">FASHION</a> </li>
					<li><a href="#">FOOD</a> </li>
					<li><a href="#">TRAVEL</a> </li>
					<li><a href="#">DECOR</a> </li>
				</ul>
				<div class="tn-text">
					<div class="tn-text-list">
						<ul>
							<li><a href="#"><img src="img/one.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/three.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/four.jpg" width="155" height="200" /></a></li>
						</ul>
					</div>
					<div class="tn-text-list">
						<ul>
							<li><a href="#"><img src="img/six.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/one.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/three.jpg" width="155" height="200" /></a></li>
						</ul>
					</div>
					<div class="tn-text-list">
						<ul>
							<li><a href="#"><img src="img/four.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/three.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/one.jpg" width="155" height="200" /></a></li>
						</ul>
					</div>
					<div class="tn-text-list">
						<ul>
							<li><a href="#"><img src="img/six.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/three.jpg" width="155" height="200" /></a></li>
							<li><a href="#"><img src="img/four.jpg" width="155" height="200" /></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="main-part">
				<div class="pic-header"> <img id="pic-header" src="img/coffee.jpg" width="910" height="760" />
					<div id="linellae1"></div>
					<span>God Will Provide<br>
						a Lamb</span>
					<p>God will provide a lamb<br>
						Tobe offered up in your place<br>
						Asacrifice so spotless and clean<br>
						Totake all your sin away <br>
						<br>
						<span>READ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SHOP</span> </p>
				</div>
				<div class="pic-left"> <img id="pic-left" src="img/coffee-two.jpg" width="600" height="860" />
					<div id="linellae2"></div>
					<span> TRAVEL<br>
						SETTLING IN</span>
					<p>It’s been a little over a week since we moved<br>
						to Los Angeles and although we don’t have<br>
						much, it’s starting to feel more like home... <br>
						<br>
						<span>READ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SHOP</span> </p>
				</div>
				<div class="pic-right"> <img id="pic-right" src="img/coffee-three.jpg" width="600" height="860" />
					<div id="linellae3"></div>
					<span> TRAVEL<br>
						SETTLING IN</span>
					<p>It’s been a little over a week since we moved<br>
						to Los Angeles and although we don’t have<br>
						much, it’s starting to feel more like home... <br>
						<br>
						<span>READ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SHOP</span> </p>
				</div>
				<div id="picChange">
					<ul id="pic">
						<li style="display:none;"><a href="#"><img src="img/card4.jpg" width="988" height="620" /></a></li>
						<li style="display:none;"><a href="#"><img src="img/card3.jpg" width="988" height="620" /></a></li>
						<li style="display:none;"><a href="#"><img src="img/two.jpg" width="988" height="620" /></a></li>
					</ul>
					<div id="num">
						<ul>
							<li><a href="#" onmouseover="showAd(0)"></a></li>
							<li><a href="#" onmouseover="showAd(1)"></a></li>
							<li><a href="#" onmouseover="showAd(2)"></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="lipingka">
				<ul>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/1.jpg">
								<div class="pic-font"><span> 寥寥数笔找到TA爱的味道 </span></div>
							</div>
							<p>写意咖啡杯 星礼卡 天猫精选款</p>
							<p>Chalk Cup Gift Card</p>
						</div>
					</li>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/2.jpg">
								<div class="pic-font"><span>也许挚爱的模样很简单</span></div>
							</div>
							<p>星巴克 挚爱 星礼卡</p>
							<p>Be My Volentine Gift Card</p>
						</div>
					</li>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/3.jpg">
								<div class="pic-font"><span> 让TA因你的爱，可爱每一天 </span></div>
							</div>
							<p>Hi 女神款 星礼卡 天猫精选款</p>
							<p>Hello LOVELY" Gift Card</p>
						</div>
					</li>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/4.jpg">
								<div class="pic-font"><span> 爱上相聚的滋味</span></div>
							</div>
							<p>咖啡+茶星礼卡 天猫专属款</p>
							<p>Coffee And Tea Card</p>
						</div>
					</li>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/5.jpg">
								<div class="pic-font"><span> 用甜言蜜语融化距离 </span></div>
							</div>
							<p>Hi Sweets款 星礼卡 天猫精选款</p>
							<p>Hi Sweets Gift Card</p>
						</div>
					</li>
					<li>
						<div class="view">
							<div class="pic"> <img src="img/6.jpg">
								<div class="pic-font"><span> 两杯咖啡，彼此相望 </span></div>
							</div>
							<p>爱在一起 星礼卡</p>
							<p>Love is in the Air Gift Card</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
